<template>
  <div id="app" class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h3>Register</h3>
          </div>
          <div class="card-body">
     <el-form label-width="100px" :rules="rules">
      <el-form-item label="登录名" prop="loginName">
        <el-input v-model="accessUser.loginName"/>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="accessUser.realName"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="accessUser.password"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="accessUser.phone"/>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="accessUser.email"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="accessUser.remark"/>
      </el-form-item>
      <el-form-item v-show="shouldHideRow" label="启用标志"  prop="enableFlag">
        <el-input  v-model="accessUser.enableFlag=1"/>
      </el-form-item>
      <el-form-item>
        <div class="button-container">
        <el-button type="primary"  @click="save">注册</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import userset from '@/api/accessUser'
export default {
  data(){
    return{
      shouldHideRow: false,
      accessUser:{},
      rules:{ /**登录名必填 */
        loginName: [
          {message: "登录名必填", },
          { min: 1, max: 64, message: "不超过64个字符"}
        ],
        email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
        //自定义校验
        realName:[
          {message: "真实姓名必填", trigger: "blur" },
          { min: 1, max: 64, message: "不超过64个字符"}
        ],
        phone:[
          {message: '请输入手机号码', trigger: 'blur' },
          { validator:function(rule,value,callback){
              if(/^1[34578]\d{9}$/.test(value) == false){
                callback(new Error("请输入正确的手机号"));
              }else{
                callback();
              }
            }, trigger: 'blur'
          },
        ],
      },
    }
  },
  created(){
  },
  methods: {
    save() {
      userset.accessUserAdd(this.accessUser)
        .then(data => {
          const code = data.code;
          console.log(code);
          if (code === "200") {
            this.$message({
              type: 'success',
              message: '注册成功!'
            });
            this.$router.push({ path: '/login' });
          } else {
            this.$message({
              message: '注册失败，请重新填写!'
            });
            this.accessUser = {
              loginName: '',
              email: '',
              password: '',
              phone: '',
              realName:'',
              enableFlag:'',
              remark:''
            };
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  }
}
</script>
<style>
body {
  background-color: #f8f9fa;
}
.container {
  margin-top: 120px;
  margin-left: 300px;
  margin-right: 300px;
  auto:100%;

}
.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,.05);
}
.card-header {
  background-color: #007bff;
  color: #fff;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
.card-body{
  margin-right: 10%;
  margin-left: 10%;
}

.button-container {
  text-align: -webkit-center;
  margin-bottom: 20px;
  width: auto;
}

</style>
